<template>
  <div class="app-container">
    <table-layout :label-list="labelList" :total="counts" @updateLabelList="getLabelList()" @labelData="labelData" @success="getLabelList()" />
    <!-- 放置分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height:60px">
      <el-pagination
        :current-page="page*1"
        :page-size="pagesize*1"
        :total="counts"
        layout="prev,pager,next"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>

<script>
import { labelTagsAPI } from '@/api'
import TableLayout from './tableLayout'
export default {
  name: 'Directory',
  components: {
    TableLayout

  },
  data() {
    return {
      labelList: [],
      counts: 0, // 总条数
      tableData: [],
      pagesize: 10, // 分页量
      page: 1, // 当前页
			pages: 0

    }
  },
  created() {
    this.getLabelList()

  },
  methods: {
    // 获取标签列表
    async getLabelList() {
      const { items, pagesize, pages, page, counts } = await labelTagsAPI({
					page: this.page,
					pagesize: this.pagesize,
					pages: this.pages
				})
      this.labelList = items
      this.counts = counts
			this.page = page
			this.pagesize = pagesize
			this.pages = pages
    },
		/**
		 * 点击分页按钮，切换分页
		 * **/
		changePage(newpage) {
			this.page = newpage
			this.getLabelList()
		},
    /**
     * 当前页码发生改变时触发
     * handleCurrentChange
     */
    handleCurrentChange(page) {
      console.log(page);
      this.page = page
      this.getLabelList()
    },
		// 搜索内容重新获取列表
		labelData(item) {
			console.log(item);
			this.labelList = item
		}

  }
}
</script>

<style lang='scss' scoped>
::v-deep.page {
  display: flex;
  justify-content: flex-end;
  margin: 10px 20px;
}
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
::v-deep .el-form{
	margin-top: 20px;
}
</style>